<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>canvas</title>
</head>

<body>
	<!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
	<canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>

</body>

	<script type="text/javascript">
		//通过getElementById()方法获取canvas画布对象
		var canvas= document.getElementById('webgl')

		//通过方法getContext()获取Canvas 2D绘图上下文
		var c =canvas.getContext('2d');
		c.moveTo(0,0);//直线起点坐标
		c.lineTo(50,50);//直线第2个点坐标
		c.lineTo(0,100);//直线第3个点坐标
		c.stroke();//把点连成直线绘制出来
		
	</script>

</html>